import React from "react";
import DOMPurify from "dompurify";
import styles from "./markdown-preview.module.css";

interface MarkdownPreviewProps {
  content: string;
}

export default function MarkdownPreview({ content }: MarkdownPreviewProps) {
  // 配置DOMPurify，允许样式属性和标签
  const purifyConfig = {
    ADD_TAGS: ["style"],
    ADD_ATTR: ["style", "class"],
    ALLOW_DATA_ATTR: true,
  };

  // 使用DOMPurify净化HTML，防止XSS攻击，但保留样式
  const sanitizedHtml = DOMPurify.sanitize(content, purifyConfig);

  return (
    <div className={styles.previewContainer}>
      <div
        className='html-content'
        dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
      />
      <style jsx global>{`
        .html-content h1 {
          font-size: 1.875rem;
          font-weight: bold;
          margin-top: 1.5rem;
          margin-bottom: 1rem;
        }

        .html-content h2 {
          font-size: 1.5rem;
          font-weight: 600;
          margin-top: 1.25rem;
          margin-bottom: 0.75rem;
        }

        .html-content h3 {
          font-size: 1.25rem;
          font-weight: 500;
          margin-top: 1rem;
          margin-bottom: 0.5rem;
        }

        .html-content h4 {
          font-size: 1.125rem;
          font-weight: 500;
          margin-top: 0.75rem;
          margin-bottom: 0.5rem;
        }

        .html-content h5 {
          font-size: 1rem;
          font-weight: 500;
          margin-top: 0.75rem;
          margin-bottom: 0.25rem;
        }

        .html-content h6 {
          font-size: 0.875rem;
          font-weight: 500;
          margin-top: 0.75rem;
          margin-bottom: 0.25rem;
        }

        .html-content p {
          margin-top: 0.75rem;
          margin-bottom: 0.75rem;
        }

        .html-content a {
          color: #3b82f6;
          text-decoration: none;
        }

        .html-content a:hover {
          text-decoration: underline;
        }

        .html-content ul {
          list-style-type: disc;
          padding-left: 1.5rem;
          margin: 0.75rem 0;
        }

        .html-content ol {
          list-style-type: decimal;
          padding-left: 1.5rem;
          margin: 0.75rem 0;
        }

        .html-content li {
          margin: 0.25rem 0;
        }

        .html-content blockquote {
          border-left: 4px solid #d1d5db;
          padding-left: 1rem;
          padding: 0.25rem 0 0.25rem 1rem;
          margin: 0.75rem 0;
          color: #4b5563;
        }

        .html-content .ql-editor {
          padding: 0;
        }

        .html-content pre {
          background-color: #f6f8fa;
          border-radius: 0.375rem;
          padding: 1rem;
          overflow-x: auto;
          margin: 1rem 0;
        }

        .html-content code {
          background-color: rgba(175, 184, 193, 0.2);
          border-radius: 0.25rem;
          padding: 0.2em 0.4em;
          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
            Liberation Mono, monospace;
        }

        .html-content table {
          border-collapse: collapse;
          width: 100%;
          margin: 1rem 0;
        }

        .html-content th,
        .html-content td {
          border: 1px solid #ddd;
          padding: 8px;
        }

        .html-content th {
          background-color: #f6f8fa;
          text-align: left;
        }

        /* 确保span内的样式生效 */
        .html-content span {
          display: inline;
        }

        /* 增加代码区域样式 */
        .html-content .ql-syntax {
          background-color: #f6f8fa;
          border-radius: 0.375rem;
          padding: 1rem;
          font-family: monospace;
          white-space: pre;
          overflow-x: auto;
          display: block;
          margin: 1rem 0;
        }

        /* 确保图片不会超出容器 */
        .html-content img {
          max-width: 100%;
          height: auto;
        }

        /* 水平分割线样式 */
        .html-content hr {
          border: 0;
          border-top: 1px solid #e5e7eb;
          margin: 1.5rem 0;
        }
      `}</style>
    </div>
  );
}
